/* 
    消息提示框
    $.message.error('这是一条失败消息')
    $.message.warning('这是一条警告消息')
    $.message.info('这是一条消息')
    $.message.success('这是一条成功消息')
    Message.success('这是一条成功消息')
*/
(function(global, $){

    // 默认配置
    const defaults = {
        duration: 3000,
        showClose: true,
        offset: 20,
        customClass: ''
    }
    
    // 图标映射
    const icons = {
        'success': 'success-fill',
        'warning': 'warning-fill',
        'error': 'error-fill',
        'info': 'info-fill'
    }
    
    // 消息队列
    let messageQueue = []
    let container = null
    
    // 初始化容器
    function initContainer() {
        if (!container) {
            container = $('<div class="message-container"></div>')
            $('body').append(container)
        }
        return container
    }
    
    // 创建消息元素
    function createMessage(options) {
        const config = {...defaults, ...options}
        const iconClass = icons[config.type] || icons.info
        
        const $message = $(`
            <div class="message message-${config.type} ${config.customClass}">
                <span class="message-icon">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-${iconClass}"></use>
                    </svg>
                </span>
                <div class="message-content">${config.message}</div>
                ${config.showClose ? '<button class="message-close"><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-close"></use></svg></span></button>' : ''}
            </div>
        `)
        
        return { $message, config }
    }
    
    // 显示消息
    function showMessage(options) {
        const { $message, config } = createMessage(options)
        const container = initContainer()
        
        // 添加到容器
        container.append($message)
        messageQueue.push($message)
        
        // 显示动画
        setTimeout(() => {
            $message.addClass('show')
        }, 10)
        
        // 关闭按钮事件
        if (config.showClose) {
            $message.find('.message-close').click(function(event) {
                hideMessage($message)
                return false
            })
        }
        
        // 自动关闭
        if (config.duration > 0) {
            setTimeout(() => {
                hideMessage($message)
            }, config.duration)
        }
        
        return {
            close: () => hideMessage($message),
            update: (newMessage) => {
                $message.find('.message-content').text(newMessage)
            }
        }
    }
    
    // 隐藏消息
    function hideMessage($message) {
        if ($message.hasClass('hide')) return
        
        $message.removeClass('show').addClass('hide')
        
        // 动画完成后移除元素
        setTimeout(() => {
            $message.remove();
            // 从队列中移除
            messageQueue = messageQueue.filter(msg => !msg.is($message))
        }, 300)
    }
    
    // 快捷方法
    const methods = {
        success: (message, duration = defaults.duration) => 
            showMessage({ message, type: 'success', duration }),
            
        warning: (message, duration = defaults.duration) => 
            showMessage({ message, type: 'warning', duration }),
            
        error: (message, duration = defaults.duration) => 
            showMessage({ message, type: 'error', duration }),
            
        info: (message, duration = defaults.duration) => 
            showMessage({ message, type: 'info', duration }),
            
        closeAll: () => {
            messageQueue.forEach($message => hideMessage($message))
            messageQueue = [];
        },
        
        config: (newConfig) => {
            Object.assign(defaults, newConfig)
        }
    }

    if(global.Message === undefined) {
        global.Message = methods

        if(typeof $ !== undefined) {
            $.message = methods
        }
    }
})(window, jQuery)